<template>
    <div>
        <el-form ref="emergencyDisposalRef" :model="form" label-width="162px" style="padding:0 40px 0px 20px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="任务名称" prop="taskName" label-width="70px">
                            {{form.taskName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="行政区划分析级别" prop="isCity" @change="changeCity">
                            <el-radio-group v-model="isCity">
                                <el-radio label="0">按区县</el-radio>
                                <el-radio label="1">按地市</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <template v-if="isCity=='0'">
                    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane v-for="(item,index) in form.areaList" :key="index" :label="item.province==item.city?item.province + item.area:item.province + item.city + item.area" :name="index">
                            <el-form-item label="救援力量和物资投入" :prop="`areaList.` + index + '.rescueForceMaterialInput'" :rules="rules.rescueForceMaterialInput">
                                <el-input v-model="item.rescueForceMaterialInput" placeholder="请输入救援力量和物资投入" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="地震灾害危重区域识别" :prop="`areaList.` + index + '.earthquakeDisasterCriticalArea'" :rules="rules.earthquakeDisasterCriticalArea">
                                <el-input v-model="item.earthquakeDisasterCriticalArea" placeholder="请输入地震灾害危重区域识别" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="交通系统保障和抢修" :prop="`areaList.` + index + '.trafficSystemSupportRepair'" :rules="rules.trafficSystemSupportRepair">
                                <el-input v-model="item.trafficSystemSupportRepair" placeholder="请输入交通系统保障和抢修" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="通信系统保障和抢修" :prop="`areaList.` + index + '.communicationsSystemSupportRepair'" :rules="rules.communicationsSystemSupportRepair">
                                <el-input v-model="item.communicationsSystemSupportRepair" placeholder="请输入通信系统保障和抢修" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="电力系统保障和抢修" :prop="`areaList.` + index + '.powerSystemSupportRepair'" :rules="rules.powerSystemSupportRepair">
                                <el-input v-model="item.powerSystemSupportRepair" placeholder="请输入电力系统保障和抢修" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="重要基础设施隐患排查" :prop="`areaList.` + index + '.importantFacilitiesCheck'" :rules="rules.importantFacilitiesCheck">
                                <el-input v-model="item.importantFacilitiesCheck" placeholder="请输入重要基础设施隐患排查" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="气候特征应对" :prop="`areaList.` + index + '.climateFeatureReply'" :rules="rules.climateFeatureReply">
                                <el-input v-model="item.climateFeatureReply" placeholder="请输入气候特征应对" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="民族特征应对" :prop="`areaList.` + index + '.nationFeatureReply'" :rules="rules.nationFeatureReply">
                                <el-input v-model="item.nationFeatureReply" placeholder="请输入民族特征应对" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="谣言、舆情应对" :prop="`areaList.` + index + '.rumorReply'" :rules="rules.rumorReply">
                                <el-input v-model="item.rumorReply" placeholder="请输入谣言、舆情应对" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="其他地方特征应对">
                                <el-input v-model="item.otherFeatureReply" placeholder="请输入其他地方特征应对" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                        </el-tab-pane>
                    </el-tabs>  
                </template>            
                <template v-else>
                    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane v-for="(item,index) in form.areaList" :key="index" :label="item.province==item.city?item.city:item.province+item.city" :name="index">
                            <el-form-item label="救援力量和物资投入" :prop="`areaList.` + index +  '.rescueForceMaterialInput'" :rules="rules.rescueForceMaterialInput">
                                <el-input v-model="item.rescueForceMaterialInput" placeholder="请输入救援力量和物资投入" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="地震灾害危重区域识别" :prop="`areaList.` + index +  '.earthquakeDisasterCriticalArea'" :rules="rules.earthquakeDisasterCriticalArea">
                                <el-input v-model="item.earthquakeDisasterCriticalArea" placeholder="请输入地震灾害危重区域识别" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="交通系统保障和抢修" :prop="`areaList.` + index +  '.trafficSystemSupportRepair'" :rules="rules.trafficSystemSupportRepair">
                                <el-input v-model="item.trafficSystemSupportRepair" placeholder="请输入交通系统保障和抢修" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="通信系统保障和抢修" :prop="`areaList.` + index +  '.communicationsSystemSupportRepair'" :rules="rules.communicationsSystemSupportRepair">
                                <el-input v-model="item.communicationsSystemSupportRepair" placeholder="请输入通信系统保障和抢修" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="电力系统保障和抢修" :prop="`areaList.` + index +  '.powerSystemSupportRepair'" :rules="rules.powerSystemSupportRepair">
                                <el-input v-model="item.powerSystemSupportRepair" placeholder="请输入电力系统保障和抢修" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="重要基础设施隐患排查" :prop="`areaList.` + index +  '.importantFacilitiesCheck'" :rules="rules.importantFacilitiesCheck">
                                <el-input v-model="item.importantFacilitiesCheck" placeholder="请输入重要基础设施隐患排查" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="气候特征应对" :prop="`areaList.` + index + '.climateFeatureReply'" :rules="rules.climateFeatureReply">
                                <el-input v-model="item.climateFeatureReply" placeholder="请输入气候特征应对" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="民族特征应对" :prop="`areaList.` + index + '.nationFeatureReply'" :rules="rules.nationFeatureReply">
                                <el-input v-model="item.nationFeatureReply" placeholder="请输入民族特征应对" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="谣言、舆情应对" :prop="`areaList.` + index + '.rumorReply'" :rules="rules.rumorReply">
                                <el-input v-model="item.rumorReply" placeholder="请输入谣言、舆情应对" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="其他地方特征应对">
                                <el-input v-model="item.otherFeatureReply" placeholder="请输入其他地方特征应对" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                        </el-tab-pane>
                    </el-tabs>  
                </template>
        </el-form>
    </div>
</template>

<script setup>
import { getArea } from "@/api/suggestions/analyse.js";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const props = defineProps({
    form: {
        type: Object,
    },
    task: {
        type: Object
    },
    isDisabled:{
        type: Boolean
    }
});
const activeName = ref('0')
const data = reactive({
    rules: {
        rescueForceMaterialInput: [{ required: true, message: "请输入救援力量和物资投入", trigger: 'blur', }],
        earthquakeDisasterCriticalArea: [{ required: true, message: "请输入地震灾害危重区域识别", trigger: 'blur' }],
        trafficSystemSupportRepair: [{ required: true, message: '请输入交通系统保障和抢修', trigger: 'blur'}],
        communicationsSystemSupportRepair: [{ required: true, message: '请输入通信系统保障和抢修', trigger: 'blur'}],
        powerSystemSupportRepair: [{ required: true, message: "请输入电力系统保障和抢修", trigger: "blur" }],
        importantFacilitiesCheck: [{ required: true, message: '请输入重要基础设施隐患排查', trigger: 'blur' }],
        climateFeatureReply: [{ required: true, message: '请输入气候特征应对', trigger: 'blur' }],
        nationFeatureReply: [{ required: true, message: '请输入民族特征应对', trigger: 'blur' }],
        rumorReply: [{ required: true, message: '请输入谣言、舆情应对', trigger: 'blur' }],
    }
})
const { rules } = toRefs(data)
const { form, task ,isDisabled} = toRefs(props)
const isCity = ref('0')

// 初始下标
function initActiveName(){
    activeName.value = '0';
}

function changeCity(){
    activeName.value = '0'
    getAreaData({flag:isCity.value,taskDistrict:form.value.taskDistrict,suggestionName:'应急处置对策',taskNum:form.value.taskNum})
}

// 获取 区县或者地市
function getAreaData(isCity) {
    getArea(isCity).then(response => {
        emit("changeAreaList3", response.data['应急处置对策']);
    })
}

function getAreaList3(){
    emit("getAreaList3", form.value.areaList);
}
function handleClick(tab, event){
    // console.log(tab, event)
}

function getEmergencyDisposalRef(){
    return proxy.$refs['emergencyDisposalRef']
}

defineExpose({
    getAreaList3,
    initActiveName,
    getEmergencyDisposalRef
})
</script>